// 1.首次渲染：当组件首次渲染到屏幕上时，React会执行所有useEffect中的函数（副作用函数）。这些函数会按照它们在组件中出现的顺序依次执行。
// 2.后续更新：如果组件的props或state发生变化，导致组件重新渲染，React会再次检查每个useEffect的依赖项数组。
// 如果依赖项数组中的任何值自上次渲染以来没有变化，则不会执行副作用函数。
// 如果依赖项数组中的值发生了变化，或者依赖项数组为空（意味着副作用函数应该在每次渲染后都运行），则React会再次执行该副作用函数。同样地，这些函数会按照它们在组件中出现的顺序依次执行。
// 3.组件卸载：当组件从DOM中卸载时（例如，用户导航到另一个页面或条件渲染导致组件不再显示），React会清理每个useEffect中的副作用。这通常是通过执行副作用函数中返回的清理函数来实现的。

import { useEffect, useState } from "react";
function Son () {
  // 1.渲染时开启一个定时器
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('定时器执行...')
    }, 1000)
    // 如果依赖项数组中的任何值自上次渲染以来没有变化，则不会执行副作用函数。
    return () => {
      // 清除副作用
      clearInterval(timer)
    }
  }, [])
  return <div>this is son</div>
}
function App() {
  const [show, setShow] = useState(true)
  return (
    <div>
      {show && <Son />}
      <button onClick={() => setShow(false)}>卸载Son组件</button>
    </div>
  );
}

export default App;
